<template>
  <div class="manage_4">
    <el-table
      :data="productionList[pageIndex-1]"
      style="width: 100%"
      :row-class-name="clickProduction"
      :header-cell-style="getRowClass"
      @row-click="clickRow"
      v-loading="loading"
      size="small">
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="production_detail">
            <el-form-item label="商品分类">
              <span >{{props.row.cate_name}}</span>
            </el-form-item>
            <el-form-item label="商品市场价格">
              <span>{{props.row.ot_price}}</span>
            </el-form-item>
            <el-form-item label="成本价">
              <span>{{props.row.cost}}</span>
            </el-form-item>
            <el-form-item label="收藏">
              <span>{{props.row.collect}}</span>
            </el-form-item>
            <el-form-item label="虚拟销量">
              <span>{{props.row.ficti}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品ID"
        width="80">
      </el-table-column>
      <el-table-column
        label="商品图"
        width="120">
        <template slot-scope="scope">
          <viewer :images="scope.row.slider_image">
            <div class="img" v-for="(item,index) of scope.row.slider_image" :key="index">
              <img v-show="index===0" :src="item" alt="">
            </div>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column
        prop="store_name"
        label="商品名称"
        width="300">
      </el-table-column>
      <el-table-column
        prop="product_type"
        label="商品类型">
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品售价">
      </el-table-column>
      <el-table-column
        prop="sales"
        label="销量">
      </el-table-column>
      <el-table-column
        prop="stock"
        label="库存">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <i-switch size="large" v-model="scope.row.is_show===0?false:true">
            <span slot="open">上架</span>
            <span slot="close">下架</span>
          </i-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看评论</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">移到回收站</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <Page :total="total" @on-change="changePage" show-elevator></Page>
    </div>
  </div>
</template>

<script>
  import totalProduction from '../../../apiData/productionList/recycling.js'
  export default {
    name: "manage_4",
    props: {
      name: {
        type: String
      }
    },
    data() {
      return {
        loading: false,
        productionList: [],
        pageIndex: 1,
        total: 0,
        rowIndex: null,
      }
    },
    watch: {
      pageIndex: {
        handler(val, oldVal) {
          this.loading = true;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          },1500)
        },
        immediate: true
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.productionList = totalProduction.list;
        this.total = totalProduction.count;
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      clickProduction({row, rowIndex}) {
        if (rowIndex === this.rowIndex) {
          return 'active-row';
        }
        return '';
      },
      clickRow(row) {
        let rowIndex = this.productionList.indexOf(row);
        this.rowIndex = rowIndex;
      },
      changePage(e) {
        this.pageIndex = e
      }
    }
  }
</script>

<style>

</style>
<style scoped lang="scss">
  @import "../../../style/element.scss";
  .manage_4 {
    /deep/ .el-table{
      .img{
        img{
          max-width: 50px;
          max-height: 50px;
          cursor: pointer;
        }
      }
      .active-row{
        background: #ebf7ff;
      }
      .hover-row{
        background: #ebf7ff !important;
      }
    }
    /deep/ .el-form{
      /*border: 1px solid red;*/
      padding: 0 20px;
      background: #f9f9f9;
      border-radius: 4px;
      .el-form-item{
        width: 30%;
        margin-bottom: 10px;
      }
    }
    .page{
      /*border: 1px solid red;*/
      padding: 16px;
      display: flex;
      justify-content: right;
    }
  }
</style>
